<template>
  <div class="forum-container">
    <!-- 标题区 -->
    <div class="forum-header">
      <div>
        <h1>旅游论坛</h1>
        <p class="forum-subtitle">分享你的乡村旅游见闻、攻略与故事</p>
      </div>
      <el-button type="primary" icon="el-icon-edit" class="post-btn" @click="showPostDialog = true">发帖</el-button>
    </div>

    <!-- 帖子列表 -->
    <el-row :gutter="24" class="forum-list">
      <el-col :xs="24" :sm="12" :md="8" v-for="post in posts" :key="post.id">
        <el-card shadow="hover" class="forum-card">
          <div class="forum-card-header">
            <img :src="post.avatar" class="avatar" />
            <div class="user-info">
              <span class="nickname">{{ post.nickname }}</span>
              <span class="time">{{ post.time }}</span>
            </div>
          </div>
          <h3 class="forum-title">{{ post.title }}</h3>
          <div class="forum-content">{{ post.content }}</div>
          <div class="forum-tags">
            <el-tag v-for="tag in post.tags" :key="tag" size="mini" effect="plain">{{ tag }}</el-tag>
          </div>
          <div class="forum-card-footer">
            <span><i class="el-icon-chat-dot-round"></i> {{ post.comments }}</span>
            <span><i class="el-icon-thumb"></i> {{ post.likes }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页 -->
    <div class="forum-pagination">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="2"
          :page-size="9"
          :current-page="1"
      />
    </div>

    <!-- 发帖弹窗 -->
    <el-dialog
        title="发新帖"
        :visible.sync="showPostDialog"
        width="600px"
        @closed="handleDialogClosed"
    >
      <el-form :model="newPost" label-width="60px" ref="postForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="newPost.title" maxlength="50" show-word-limit placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <quill-editor
              v-if="showPostDialog"
              v-model="newPost.content"
              ref="quillEditor"
              :options="editorOption"
          />
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select v-model="newPost.tags" multiple placeholder="选择标签">
            <el-option v-for="tag in allTags" :key="tag" :label="tag" :value="tag" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showPostDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitPost">发 帖</el-button>
      </div>
    </el-dialog>

    <!-- 图片上传input（全局唯一） -->
    <input id="quill-image-input" type="file" accept="image/*" style="display:none" @change="handleImageChange">
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: "ForumPage",
  components: { quillEditor },
  data() {
    return {
      showPostDialog: false,
      newPost: {
        title: '',
        content: '',
        tags: []
      },
      allTags: ['游记', '攻略', '美食', '摄影', '民宿', '路线', '体验'],
      editorOption: {
        placeholder: '写下你的见闻、攻略或故事，可插入图片…',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              [{ 'header': 1 }, { 'header': 2 }],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'script': 'sub' }, { 'script': 'super' }],
              [{ 'indent': '-1' }, { 'indent': '+1' }],
              [{ 'direction': 'rtl' }],
              [{ 'size': ['small', false, 'large', 'huge'] }],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'font': [] }],
              [{ 'align': [] }],
              ['clean'],
              ['image']
            ],
            handlers: {
              image: () => {
                document.getElementById('quill-image-input').click()
              }
            }
          }
        }
      },
      posts: [
        {
          id: 1,
          avatar: "https://randomuser.me/api/portraits/men/32.jpg",
          nickname: "山野旅人",
          time: "2小时前",
          title: "探访江南水乡的最佳路线",
          content: "上周末去了江南水乡，推荐一条人少景美的路线，适合慢慢走、慢慢拍照……",
          tags: ["江南", "路线", "摄影"],
          comments: 12,
          likes: 34
        },
        {
          id: 2,
          avatar: "https://randomuser.me/api/portraits/women/45.jpg",
          nickname: "小村姑",
          time: "5小时前",
          title: "乡村民宿体验分享",
          content: "最近住了一家超棒的民宿，老板人很好，早餐特别有特色，强烈推荐！",
          tags: ["民宿", "体验", "美食"],
          comments: 8,
          likes: 21
        }
      ]
    }
  },
  methods: {
    submitPost() {
      if (!this.newPost.title.trim() || !this.newPost.content.trim()) {
        this.$message.warning('请填写标题和内容');
        return;
      }

      this.posts.unshift({
        id: Date.now(),
        avatar: "https://randomuser.me/api/portraits/men/32.jpg",
        nickname: "新用户",
        time: "刚刚",
        title: this.newPost.title,
        content: this.newPost.content,
        tags: this.newPost.tags,
        comments: 0,
        likes: 0
      });

      this.showPostDialog = false;
      this.$message.success('发帖成功！');
    },

    handleDialogClosed() {
      this.newPost = {
        title: '',
        content: '',
        tags: []
      };

      if (this.$refs.postForm) {
        this.$refs.postForm.resetFields();
      }
    },

    handleImageChange(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (evt) => {
        const quill = this.$refs.quillEditor?.quill;
        if (quill) {
          const range = quill.getSelection();
          quill.insertEmbed(range ? range.index : 0, 'image', evt.target.result);
        }
      };
      reader.readAsDataURL(file);
      e.target.value = '';
    }
  }
}
</script>

<style scoped>
.forum-container {
  max-width: 1100px;
  margin: 32px auto 0 auto;
  padding: 0 16px 32px 16px;
  background: #fafbfc;
  min-height: 80vh;
}
.forum-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
}
.forum-header h1 {
  margin: 0;
  font-size: 2.2rem;
  color: #222;
  font-weight: 700;
  letter-spacing: 2px;
}
.forum-subtitle {
  color: #888;
  font-size: 1.1rem;
  margin-top: 8px;
}
.post-btn {
  font-size: 1rem;
  padding: 10px 28px;
  border-radius: 24px;
}
.forum-list {
  margin-bottom: 32px;
}
.forum-card {
  margin-bottom: 24px;
  border-radius: 12px;
  transition: box-shadow 0.2s;
}
.forum-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-right: 12px;
  border: 2px solid #e6e6e6;
}
.user-info {
  display: flex;
  flex-direction: column;
}
.nickname {
  font-weight: 600;
  color: #409EFF;
}
.time {
  font-size: 12px;
  color: #aaa;
}
.forum-title {
  margin: 8px 0 6px 0;
  font-size: 1.15rem;
  color: #222;
  font-weight: 600;
}
.forum-content {
  color: #555;
  font-size: 1rem;
  margin-bottom: 10px;
  min-height: 40px;
}
.forum-tags {
  margin-bottom: 8px;
}
.forum-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  color: #888;
  font-size: 14px;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
}
.forum-pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
</style>
